<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理 - 科创课程报名系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #3183E0;
            --primary-dark: #2a73c9;
            --secondary-color: #6c757d;
            --sidebar-width: 250px;
            --header-height: 60px;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
            background-color: #f8f9fa;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            width: var(--sidebar-width);
            z-index: 100;
            padding: 0;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            transition: all 0.3s;
        }
        
        .sidebar-header {
            height: var(--header-height);
            display: flex;
            align-items: center;
            padding: 0 15px;
            background-color: var(--primary-color);
            color: white;
        }
        
        .sidebar-header h4 {
            font-size: 18px;
            margin: 0;
            font-weight: 600;
        }
        
        .nav-item {
            margin: 2px 10px;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .nav-link {
            color: #495057;
            font-weight: 500;
            padding: 12px 15px;
            border-radius: 5px;
            transition: all 0.2s;
        }
        
        .nav-link:hover {
            background-color: #f1f3f9;
            color: var(--primary-color);
        }
        
        .nav-link.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .nav-link i {
            margin-right: 10px;
            font-size: 16px;
            width: 20px;
            text-align: center;
        }
        
        /* 主内容区域样式 */
        .main-content {
            margin-left: var(--sidebar-width);
            transition: all 0.3s;
        }
        
        .header {
            height: var(--header-height);
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;
        }
        
        .toggle-btn {
            font-size: 20px;
            color: #6c757d;
            cursor: pointer;
            margin-right: 10px;
            display: none;
        }
        
        .user-menu {
            display: flex;
            align-items: center;
        }
        
        .user-menu .user-name {
            font-size: 16px;
            font-weight: 500;
            margin-right: 15px;
        }
        
        .content {
            padding: 20px;
            min-height: calc(100vh - var(--header-height));
        }
        
        .card {
            border: none;
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: 600;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }
        
        /* DataTable样式优化 */
        .dataTables_wrapper {
            padding: 0;
        }
        
        table.dataTable {
            border-collapse: collapse !important;
            margin-top: 15px !important;
            margin-bottom: 15px !important;
        }
        
        table.dataTable thead th {
            border-bottom: 1px solid #dee2e6;
            background-color: #f8f9fa;
            color: #495057;
            font-weight: 600;
            padding: 12px 10px;
        }
        
        table.dataTable tbody td {
            padding: 12px 10px;
            vertical-align: middle;
        }
        
        table.dataTable.no-footer {
            border-bottom: 1px solid #dee2e6;
        }
        
        .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
            padding: 10px 0;
        }
        
        /* 状态标签 */
        .status-badge {
            padding: 5px 10px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
        }
        
        .status-pending {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .status-confirmed {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .status-completed {
            background-color: #e8f5e9;
            color: var(--success-color);
        }
        
        .status-cancelled {
            background-color: #ffebee;
            color: var(--danger-color);
        }
        
        /* 操作按钮 */
        .action-btn {
            padding: 5px 10px;
            margin-right: 5px;
            font-size: 13px;
        }
        
        /* 模态框样式 */
        .modal-header {
            background-color: var(--primary-color);
            color: white;
            border-radius: 0;
        }
        
        .modal-title {
            font-weight: 600;
        }
        
        /* 响应式 */
        @media (max-width: 992px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .toggle-btn {
                display: block;
            }
            
            .sidebar.show {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h4>科创课程报名系统</h4>
        </div>
        <ul class="nav flex-column mt-3">
            <li class="nav-item">
                <a class="nav-link active" href="#" id="registrations-tab">
                    <i class="fas fa-clipboard-list"></i> 报名管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" id="settings-tab">
                    <i class="fas fa-cog"></i> 系统设置
                </a>
            </li>
            <li class="nav-item mt-auto">
                <a class="nav-link text-danger" href="/admin/logout">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </a>
            </li>
        </ul>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="header">
            <div>
                <i class="fas fa-bars toggle-btn" id="sidebar-toggle"></i>
                <span id="page-title">报名管理</span>
            </div>
            <div class="user-menu">
                <span class="user-name" th:text="${username}">管理员</span>
                <a href="/admin/logout" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </a>
            </div>
        </div>
        
        <div class="content">
            <!-- 报名管理页面 -->
            <div id="registrations-page">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">报名信息列表</h4>
                    <div>
                        <button class="btn btn-success mr-2" id="export-btn">
                            <i class="fas fa-file-excel mr-1"></i> 导出Excel
                        </button>
                        <div class="btn-group">
                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <i class="fas fa-filter mr-1"></i> 筛选
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item active" href="#" data-filter="all">全部</a>
                                <a class="dropdown-item" href="#" data-filter="pending">待确认</a>
                                <a class="dropdown-item" href="#" data-filter="confirmed">已确认</a>
                                <a class="dropdown-item" href="#" data-filter="cancelled">已取消</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="registrations-table" class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>学生姓名</th>
                                        <th>年级</th>
                                        <th>家长姓名</th>
                                        <th>联系方式</th>
                                        <th>报名时间</th>
<!--                                        <th>状态</th>-->
<!--                                        <th width="120">操作</th>-->
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="reg : ${registrations}">
                                        <td th:text="${reg.id}">1</td>
                                        <td th:text="${reg.studentName}">张三</td>
                                        <td th:text="${reg.grade}">小学五年级</td>
                                        <td th:text="${reg.parentName}">张先生</td>
                                        <td th:text="${reg.contactPhone}">13800138000</td>
                                        <td>
                                            <span th:text="${reg.createTime}">2023-01-01 12:00:00</span>
                                        </td>
<!--                                        <td>-->
<!--                                            <span th:class="${'status-badge ' + (reg.status == 'PENDING' ? 'status-pending' : -->
<!--                                                (reg.status == 'CONFIRMED' ? 'status-confirmed' : -->
<!--                                                (reg.status == 'COMPLETED' ? 'status-completed' : 'status-cancelled')))}"-->
<!--                                                th:text="${statusMap[reg.status]}">-->
<!--                                                状态-->
<!--                                            </span>-->
<!--                                        </td>-->
<!--                                        <td>-->
<!--                                            <button class="btn btn-sm btn-info action-btn view-btn" th:data-id="${reg.id}">-->
<!--                                                <i class="fas fa-eye"></i>-->
<!--                                            </button>-->
<!--                                            <button class="btn btn-sm btn-danger action-btn delete-btn" th:data-id="${reg.id}">-->
<!--                                                <i class="fas fa-trash"></i>-->
<!--                                            </button>-->
<!--                                        </td>-->
                                    </tr>
                                    <tr th:if="${registrations.empty}">
                                        <td colspan="8" class="text-center">暂无报名数据</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置页面 -->
            <div id="settings-page" style="display: none;">
                <h4 class="mb-4">系统设置</h4>
                
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>报名限制设置</span>
                        <button class="btn btn-sm btn-primary" id="add-limit-btn">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="limits-table" class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>名额限制</th>
                                        <th>状态</th>
                                        <th width="120">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="limit : ${limits}">
                                        <td th:text="${limit.id}">1</td>
                                        <td>
                                            <span th:text="${limit.startTime != null ? #temporals.format(limit.startTime, 'yyyy-MM-dd HH:mm:ss') : '-'}">2023-01-01 00:00:00</span>
                                        </td>
                                        <td>
                                            <span th:text="${limit.endTime != null ? #temporals.format(limit.endTime, 'yyyy-MM-dd HH:mm:ss') : '-'}">2023-12-31 23:59:59</span>
                                        </td>
                                        <td th:text="${limit.maxCount}">100</td>
                                        <td>
                                            <span th:with="now=${#temporals.createNow()}">
                                                <span th:if="${limit.startTime == null}" class="status-badge status-pending">未开始</span>
                                                <span th:if="${limit.startTime != null && limit.startTime gt now}" class="status-badge status-pending">未开始</span>
                                                <span th:if="${limit.startTime != null && limit.startTime le now && (limit.endTime == null || limit.endTime ge now)}" class="status-badge status-confirmed">进行中</span>
                                                <span th:if="${limit.startTime != null && limit.endTime != null && limit.endTime lt now}" class="status-badge status-completed">已结束</span>
                                            </span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-danger action-btn delete-limit-btn" th:data-id="${limit.id}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr th:if="${limits.empty}">
                                        <td colspan="6" class="text-center">暂无限制数据</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 报名详情模态框 -->
    <div class="modal fade" id="registration-detail-modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">报名详情</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="text-muted mb-1">学生姓名</label>
                        <p class="font-weight-bold" id="detail-studentName"></p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted mb-1">年级</label>
                        <p class="font-weight-bold" id="detail-grade"></p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted mb-1">家长姓名</label>
                        <p class="font-weight-bold" id="detail-parentName"></p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted mb-1">联系方式</label>
                        <p class="font-weight-bold" id="detail-contactPhone"></p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted mb-1">报名时间</label>
                        <p class="font-weight-bold" id="detail-createTime"></p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted mb-1">状态</label>
                        <p class="font-weight-bold" id="detail-status"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" id="confirm-btn">确认报名</button>
                    <button type="button" class="btn btn-danger" id="cancel-btn">取消报名</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加限制模态框 -->
    <div class="modal fade" id="add-limit-modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加报名限制</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="limit-form">
                        <div class="form-group">
                            <label for="startTime">开始时间</label>
                            <input type="datetime-local" class="form-control" id="startTime" name="startTime" required>
                        </div>
                        <div class="form-group">
                            <label for="endTime">结束时间</label>
                            <input type="datetime-local" class="form-control" id="endTime" name="endTime" required>
                        </div>
                        <div class="form-group">
                            <label for="maxCount">名额限制</label>
                            <input type="number" class="form-control" id="maxCount" name="maxCount" min="1" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-limit-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function() {
            // 侧边栏切换
            $('#sidebar-toggle').click(function() {
                $('.sidebar').toggleClass('show');
            });
            
            // 切换页面
            $('#registrations-tab').click(function(e) {
                e.preventDefault();
                showPage('registrations');
            });
            
            $('#settings-tab').click(function(e) {
                e.preventDefault();
                showPage('settings');
            });
            
            function showPage(page) {
                $('.nav-link').removeClass('active');
                $(`#${page}-tab`).addClass('active');
                
                $('.content > div').hide();
                $(`#${page}-page`).show();
                
                $('#page-title').text(page === 'registrations' ? '报名管理' : '系统设置');
            }
            
            // 表格初始化
            $('#registrations-table, #limits-table').DataTable({
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.21/i18n/Chinese.json'
                },
                responsive: true
            });
            
            // 查看报名详情
            $(document).on('click', '.view-btn', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: `/admin/api/registrations/${id}`,
                    method: 'GET',
                    success: function(data) {
                        $('#detail-studentName').text(data.studentName);
                        $('#detail-grade').text(data.grade);
                        $('#detail-parentName').text(data.parentName);
                        $('#detail-contactPhone').text(data.contactPhone);
                        $('#detail-createTime').text(data.createTime ? new Date(data.createTime).toLocaleString('zh-CN') : '-');
                        
                        var status = {
                            'PENDING': '待确认',
                            'CONFIRMED': '已确认',
                            'COMPLETED': '已完成',
                            'CANCELLED': '已取消'
                        };
                        $('#detail-status').text(status[data.status] || data.status);
                        
                        // 根据状态控制按钮显示
                        if (data.status === 'PENDING') {
                            $('#confirm-btn').show();
                            $('#cancel-btn').show();
                        } else if (data.status === 'CONFIRMED') {
                            $('#confirm-btn').hide();
                            $('#cancel-btn').show();
                        } else {
                            $('#confirm-btn').hide();
                            $('#cancel-btn').hide();
                        }
                        
                        // 设置操作按钮的数据ID
                        $('#confirm-btn').data('id', data.id);
                        $('#cancel-btn').data('id', data.id);
                        
                        $('#registration-detail-modal').modal('show');
                    }
                });
            });
            
            // 确认报名
            $('#confirm-btn').click(function() {
                var id = $(this).data('id');
                $.ajax({
                    url: `/admin/api/registrations/${id}/status`,
                    method: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify({ status: 'CONFIRMED' }),
                    success: function() {
                        $('#registration-detail-modal').modal('hide');
                        window.location.reload(); // 刷新页面以显示更新后的数据
                    }
                });
            });
            
            // 取消报名
            $('#cancel-btn').click(function() {
                var id = $(this).data('id');
                if (confirm('确认要取消该报名吗？')) {
                    $.ajax({
                        url: `/admin/api/registrations/${id}/status`,
                        method: 'PUT',
                        contentType: 'application/json',
                        data: JSON.stringify({ status: 'CANCELLED' }),
                        success: function() {
                            $('#registration-detail-modal').modal('hide');
                            window.location.reload(); // 刷新页面以显示更新后的数据
                        }
                    });
                }
            });
            
            // 删除报名
            $(document).on('click', '.delete-btn', function() {
                var id = $(this).data('id');
                if (confirm('确认要删除该报名信息吗？')) {
                    $.ajax({
                        url: `/admin/api/registrations/${id}`,
                        method: 'DELETE',
                        success: function() {
                            window.location.reload(); // 刷新页面以显示更新后的数据
                        }
                    });
                }
            });
            
            // 筛选报名
            $('.dropdown-item').click(function(e) {
                e.preventDefault();
                $('.dropdown-item').removeClass('active');
                $(this).addClass('active');
                
                var filter = $(this).data('filter');
                var table = $('#registrations-table').DataTable();
                table.search(filter === 'all' ? '' : filter).draw();
            });
            
            // 导出Excel
            $('#export-btn').click(function() {
                window.location.href = '/admin/api/registrations/export';
            });
            
            // 添加限制
            $('#add-limit-btn').click(function() {
                $('#limit-form')[0].reset();
                $('#add-limit-modal').modal('show');
            });
            
            // 保存限制
            $('#save-limit-btn').click(function() {
                var data = {
                    startTime: $('#startTime').val(),
                    endTime: $('#endTime').val(),
                    maxCount: parseInt($('#maxCount').val())
                };
                
                $.ajax({
                    url: '/admin/api/limits',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function() {
                        $('#add-limit-modal').modal('hide');
                        window.location.reload(); // 刷新页面以显示更新后的数据
                    }
                });
            });
            
            // 删除限制
            $(document).on('click', '.delete-limit-btn', function() {
                var id = $(this).data('id');
                if (confirm('确认要删除该报名限制吗？')) {
                    $.ajax({
                        url: `/admin/api/limits/${id}`,
                        method: 'DELETE',
                        success: function() {
                            window.location.reload(); // 刷新页面以显示更新后的数据
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 